import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/main/app_bar.dart';
import 'package:flutter_eve_plugin/constants/constant.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/login/area_code.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/plugin/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/login/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class LoginAreaCodePage extends StatefulWidget {
  final String title;

  LoginAreaCodePage({Key key, this.title}) : super(key: key);

  @override
  _LoginAreaCodePageState createState() => _LoginAreaCodePageState();
}

class _LoginAreaCodePageState extends State<LoginAreaCodePage> {
  AreaCodeRes _res;

  @override
  void initState() {
    super.initState();
    var req = AreaCodeReq('app-ext', '', 'mobileAreaCode');
    PluginEve.sendMessage(PluginConstant.httpYXAreaCode,
            param: req, httpType: HttpType.POST)
        .then((data) {
      setState(() {
        _res = data;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(
        converter: (store) => AppStateViewModel(
            state: store.state,
            yeXiuStateViewModel: YeXiuStateViewModel(
                loginStateViewModel: LoginStateViewModel(onAreaCode: (code) {
              store.dispatch(areaCode(store, code));
              Navigator.pop(context);
            }))),
        builder: (context, vm) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: buildAppBar(context,
                  title: widget.title,
                  titleColor: Color(0xFF333333),
                  type: FigureIP.YE_XIU,
                  colors: [Colors.white, Colors.white]),
              body: ListView.separated(
                itemCount: _res?.data?.length ?? 0,
                separatorBuilder: (BuildContext context, int index) =>
                    Container(
                        padding: EdgeInsets.only(
                            left: setRatio(16), right: setRatio(16)),
                        child: Divider(
                          height: setRatio(1),
                          color: Color(0xFFE5E5E5),
                        )),
                itemBuilder: (BuildContext context, int index) =>
                    GestureDetector(
                      onTap: () {
                        vm.yeXiuStateViewModel.loginStateViewModel
                            .onAreaCode('${_res?.data[index]?.code ?? ""}');
                      },
                      child: Container(
                        padding: EdgeInsets.all(setRatio(16)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              '${_res?.data[index]?.name ?? ""}',
                              style: TextStyle(
                                  color: Color(0xFF393939),
                                  fontSize: setTextSp(16)),
                            ),
                            SizedBox(
                              width: setRatio(16),
                            ),
                            Text(
                              '+${_res?.data[index]?.code ?? ""}',
                              style: TextStyle(
                                  color: Color(0xFF393939),
                                  fontSize: setTextSp(16)),
                            )
                          ],
                        ),
                      ),
                    ),
              ));
        });
  }
}
